<template>
  <a-config-provider :locale="antdLocale"
                     :getPopupContainer="getPopupContainer">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>

    <Teleport to="body">
      <a-spin class="my-spin"
              size="large"
              :delay="300"
              :spinning="spinning" />
    </Teleport>
  </a-config-provider>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref } from 'vue';

import { useStore } from '@/store';

import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import zhTW from 'ant-design-vue/es/locale/zh_TW';

// 默认是英语，所以这里不需要引入
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/zh-tw';

import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

const langMap = {
  'en-US': enUS,
  'zh-CN': zhCN,
  'zh-TW': zhTW
};
const langMapDayjs = {
  'en-US': 'en',
  'zh-CN': 'zh-cn',
  'zh-TW': 'zh-tw'
};

export default defineComponent({
  name: 'App',
  setup() {
    const { t, locale } = useI18n();
    const $route = useRoute();

    const store = useStore();
    const getPopupContainer = (el: any, dialogContext: any) => {
      if (dialogContext) {
        return dialogContext.getDialogWrap();
      } else {
        return document.body;
      }
    };

    const lang = computed(() => store.state.lang);
    const antdLocale = ref<any>(zhCN);
    watch(
      lang,
      val => {
        // 切换业务级语言包
        locale.value = val;
        // @ts-ignore 切换antd
        antdLocale.value = langMap[lang.value];
        // @ts-ignore 切换dayjs
        dayjs.locale(langMapDayjs[lang.value]);
        // @ts-ignore 切换标题
        document.title = t(`router.${$route.name}`);
      },
      { immediate: true }
    );

    return {
      spinning: computed(() => store.state.spinning),
      getPopupContainer,
      antdLocale
    };
  }
});
</script>

<style lang="less">
@import './assets/css/mui_basic.css';
@import './assets/css/g.less';
</style>

<style lang="less" scoped>
.my-spin {
  &.ant-spin {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;

    &:deep(.ant-spin-dot) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -16px;
      margin-top: -16px;
    }
  }
}
</style>





